{extend name="base"}
{block name="main"}
<div id="app" v-cloak>
	<!-- {if(config('auth.super_id')==$user['id'])} -->
	<el-row class="ws-quote">
		<el-col :span="24" >
			系统设置
		</el-col>
	</el-row>
	<el-table :data="baseData" border stripe header-row-style="">
		<el-table-column label="配置项" width="260px" prop="name" align="center"></el-table-column>
		<el-table-column label="参数值">
			<template slot-scope="scope">

				<el-input v-model="scope.row.value" placeholder="请输入内容" v-if="scope.row.type==='input'"></el-input>

				<input type="file" :name="scope.row.field" @change="appUploads($event,scope.row)" v-if="scope.row.type==='app_uploads'">
			</template>
		</el-table-column>
		<el-table-column label="说明" prop="remark" align="center"></el-table-column>
	</el-table>
	<el-row class="p_y20">
		<el-col :offset="6" :span="8">
			<el-button type="primary" @click="_wspost('{:url('edit')}',{data:baseData})">更新配置</el-button>
		</el-col>
		
	</el-row>
	<!-- {/if} -->
	<el-row class="p_y20">
		<!-- {if(config('auth.super_id')==$user['id'])} -->
		<el-card shadow="always" style="width: 242px;float: left;margin:0 20px;">
		  <div slot="header">
		    <span>扫码下载管理端</span>
		  </div>
		  <div id="manage_app"></div>
		</el-card>
		<!-- {/if} -->
		<el-card shadow="always" style="width: 242px;float: left;margin:0 20px;">
		  <div slot="header">
		    <span>扫码下载客户端APP</span>
		  </div>
		  <div id="appQrcode"></div>
		</el-card>
		<el-card shadow="always" style="width: 242px;float: left;margin:0 20px;">
		  <div slot="header">
		    <span>扫码下载分身</span>
		  </div>
		  <div id="mult_app"></div>
		</el-card>

		<el-card shadow="always" style="width: 242px;float: left;margin:0 20px;">
		  <div slot="header">
		    <span>扫码下载专用微信版本</span>
		  </div>
		  <div id="weixinQrcode"></div>
		</el-card>

		<el-card shadow="always" style="width: 242px;float: left;margin:0 20px;">
		  <div slot="header">
		    <span>扫码下载微手</span>
		  </div>
		  <div id="weishou"></div>
		</el-card>
	</el-row>
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script type="text/babel" type="text/javascript">
var app=new Vue({
	el:'#app',
	mixins:[wsMixins],
	data:{
		list:{$list->toJson()|raw},
		baseData:[
			{field:'manage_version',name:'管理端版本号',type:'input',value:'1',remark:'管理端版本号'},
			{field:'manage_app',name:'上传管理端App',type:'app_uploads',value:'',remark:'管理端'},
			
			{field:'version',name:'客户端版本号',type:'input',value:'1',remark:'客户端版本号'},
			{field:'app',name:'上传客户端App',type:'app_uploads',value:'',remark:'客户端'},

			{field:'mult_version',name:'分身版本号',type:'input',value:'1',remark:'分身版本号'},
			{field:'mult_app',name:'上传分身App',type:'app_uploads',value:'',remark:'分身'},

			//微手配置
			{field:'weishou_version',name:'微手版本号',type:'input',value:'1',remark:'分身版本号'},
			{field:'weishou_app',name:'上传微手App',type:'app_uploads',value:'',remark:'微手'},
		]
	},
	created(){
		this.init();
	},
	methods:{
		init(){
			this.baseData.forEach(item=>{
				this.list.forEach(v=>{
					if(v.field===item.field){
						item.id=v.id;
						item.value=v.value;
					}
				})
			});
		},
		// APP上传
		appUploads(e,row){
			let file=e.target.files[0];
			let formData=new FormData();
			formData.append('id',row.id);
			formData.append('file',file); // 'file' 可变 相当于 input 表单的name 属性
			formData.append('name',row.field);
			this.jqUpload("{:url('appUploads')}",formData,res=>{
				console.log(res);
			});
		},
	}
});
</script>
<script type="text/javascript" src="{:_static()}/js/jquery.qrcode.js"></script>
<script type="text/javascript" src="{:_static()}/js/utf.js"></script>
<script type="text/babel" type="text/javascript">
	var preDomain="{:request()->domain()}";
	$("#manage_app").empty().qrcode({
		render : "canvas",
		text : preDomain+'/manage_app.apk',
		width : "200",              	// 二维码的宽度
		height : "200",             	// 二维码的高度
		background : "#ffffff",     	// 二维码的后景色
		foreground : "#000000",     	// 二维码的前景色
		src: ""    						// 二维码中间的图片
	});
	$("#appQrcode").empty().qrcode({		// 调用qQcode生成二维码
		render : "canvas",
		text : preDomain+'/app.apk', 
		width : "200",              	// 二维码的宽度
		height : "200",             	// 二维码的高度
		background : "#ffffff",     	// 二维码的后景色
		foreground : "#000000",     	// 二维码的前景色
		src: ""    						// 二维码中间的图片
	});
	$("#mult_app").empty().qrcode({		// 调用qQcode生成二维码
		render : "canvas",
		text : preDomain+'/mult_app.apk', 
		width : "200",              	// 二维码的宽度
		height : "200",             	// 二维码的高度
		background : "#ffffff",     	// 二维码的后景色
		foreground : "#000000",     	// 二维码的前景色
		src: ""    						// 二维码中间的图片
	});
	$("#weixinQrcode").empty().qrcode({		// 调用qQcode生成二维码
		render : "canvas", // table||canvas
		text : preDomain+'/weixin.apk',
		width : "200",              	// 二维码的宽度
		height : "200",             	// 二维码的高度
		background : "#ffffff",     	// 二维码的后景色
		foreground : "#000000",     	// 二维码的前景色
		src: ""    						// 二维码中间的图片
	});
	$("#weishou").empty().qrcode({		// 调用qQcode生成二维码
		render : "canvas", // table||canvas
		text : preDomain+'/weishou_app.apk',
		width : "200",              	// 二维码的宽度
		height : "200",             	// 二维码的高度
		background : "#ffffff",     	// 二维码的后景色
		foreground : "#000000",     	// 二维码的前景色
		src: ""    						// 二维码中间的图片
	});
</script>
{/block}